<!--显示与隐藏图标切换-->

<template>
  <div class="show-toggle">
    <Icon :type="currentValue ? 'md-eye' : 'md-eye-off'" :size="size" @click.stop="iconClickHandler"></Icon>
  </div>
</template>

<script>
  export default {
    name: "ShowToggle",
    props: {
      value: {
        type: [String, Number, Boolean]
      },
      size: {
        type: Number,
        default: 12
      }
    },
    data() {
      return {
        currentValue: this.value
      }
    },
    mounted() {
    
    },
    methods: {
      iconClickHandler () {
        this.currentValue = !this.currentValue;
        this.$emit('input', this.currentValue);
      }
    },
    computed: {
      
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    }
  }
</script>

<style lang="less" scoped>
  .show-toggle {
    display: inline-block;
    padding: 0px 5px;
  }
</style>